<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 50px 250px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: inline-block
        }

  
        /* .box2,.box3,.box5,.box6,.box8,.box9{
            display: inline-block;
            background-color: black;
        } */
        .box1>table td{
            width: 66.6px;
            height: 200px;
            background-color: black;
        }
        .box2{
            border: 1px solid #00a2e8;
            border-radius: 50%;

            color: #c3c3c3;
        }
        .box3{
            width: 0;
            height: 0;
            border-right: 98px solid transparent;
            border-top: 199px solid red;
            border-left: 99px solid transparent;
            position: relative;

        }
        .box5{
            width: 0;
            height: 0;
            border-right: 101px solid transparent;
            border-top: 83px solid red;
            border-left: 99px solid transparent;
            position: relative;
            margin: 61px auto;
            background-color:green;
        }
        .box5:before {
            content: "";
            position: absolute;
            top: -60px;
            left: -108px;
            border-right: 98px solid transparent;
            border-bottom: 67px solid red;
            border-left: 98px solid transparent;
            transform: rotate(110deg);
        }

        .box5:after {
            content: "";
            position: absolute;
            top: -62px;
            left: -105px;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            transform: rotate(250deg);
        }

        
        .box4>table{
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            padding: 5px;
            border: 1px solid black;
        }
        .box6>table{
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            padding: 5px;
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }



        .box7{
            background-image: url(jige.jpg);
            background-size: cover;
        }
        .box_8{
            width: 150px;
            height: 50px;
            position: absolute;
            margin: 50px 20px;
            border: 5px solid black;
            border-top-left-radius: 15%;
            border-bottom-right-radius: 15%;
        }
        .box_9{
            width: 100px;
	        height: 0;
            margin-top: 0;
            position: absolute;
            margin-top: 50px;
            margin-left: 20px;
	        border-width: 0px 50px 50px 0px;
	        border-style: none solid solid;
	        border-color: transparent transparent rgba(255, 0, 0, 1);
            box-shadow: -10px -10px 5px red;
        }


    </style>
</head>
<body>
<div class="box1" ><table>
    <tbody><tr>
        <td style="background-color: rgb(255,127,39)"></td>
        <td style="background-color: #880015"></td>
        <td style="background-color: #00a2e8"></td>
    </tr></tbody>
</table></div>
<div class="box2" ></div>
<div class="box3" ></div>
<br/>
<div class="box4" >
    <table>
        <tbody>
            <tr>
                <td colspan="3"></td>
    
            </tr>
            <tr>
                <td colspan="3"></td>
    
            </tr>
            <tr>
               
                <td colspan="2"></td>
                <td ></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="box5" ></div>
<div class="box6" >
    
</div>
<br/>
<div class="box7" ></div>
<div class="box8" >
    <div class="box_8"></div>
</div>
<div class="box9" >
    <div class="box_9"></div>
</div>

</body>
</html>